<div ng-init="init();" class="kmi-layout-content SMT2502-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'SMT2502.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="basicData_panel">
                <div class="header-panel-column">
                    <div class="kmi-text-fields" style="flex:80%">
                        <label class="label" ng-bind="'SMT2502.head_info.origin_reel_no' | translate"></label>
                        <input style="flex: 1;margin-left: 8px;" ng-model="org_reel_no" readonly="readonly" ng-click="loadOriginReelNo();"></input>
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    </div>
                    <div class="kmi-text-fields" style="flex:20%">
                        <label class="label" ng-bind="'SMT2502.head_info.qty' | translate"></label>
                        <div ng-bind="org_reel_actual_qty"></div>
                    </div>
                </div>
                <div class="header-panel-column">
                    <div class="kmi-text-fields" style="flex:80%">
                        <label class="label" ng-bind="'SMT2502.head_info.new_reel_no' | translate"></label>
                        <input ng-model="new_reel_no" style="margin-left: 8px;"/>
                        <div class="tip qrcode" ng-click="QRCodeScanner();">
                            <img src="image/icons/QRCode.png">
                        </div>
                    </div>
                    <div class="kmi-text-fields" style="flex:20%">
                        <label class="label" ng-bind="'SMT2502.head_info.sep_qty' | translate"></label>
                        <input ng-model="new_reel_actual_qty" readonly='readonly' ng-click="ChangeQty()" ng-disabled="org_reel_actual_qty =='' || new_reel_no ==''"></input>
                    </div>
                </div>
                <div class="header-panel-column">
                    <div class="kmi-text-fields" style="flex:70%">
                        <label class="label" ng-bind="'SMT2502.head_info.sep_dscpt' | translate"></label>
                        <input style="flex: 1;margin-left: 8px;" ng-model="split_reason"></input>
                    </div>
                    <div class="kmi-button kmi-button-confrim" ng-click="open()" style="width:100px;margin-top:0px;">
                        <label ng-bind="'SMT2502.head_info.open' | translate"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
            </div>
            
            <div class="kmi-list column-selector">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:0 0 40px;"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2502.list.origin_reel_no' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2502.list.qty' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2502.list.new_reel_no' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2502.list.sep_qty' | translate"></div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'SMT2502.list.sep_dscpt' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in reel_list track by $index">
                    <div class="kmi-list__column column-border" style="flex:0 0 40px;">
                        <button class="mdl-button mdl-button--icon" ng-click="deleteItem($index,item)">
                            <img src="image/icons/delete.png">
                        </button>
                    </div>
                    <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.org_reel_no"></div>
                    <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.org_reel_actual_qty"></div>
                    <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.new_reel_no"></div>
                    <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.new_reel_actual_qty"></div>
                    <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.split_reason"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="kmi-layout-footer">
        <button class="mdl-button mdl-button--fab mdl-shadow--custom mdl-button--custom1"
            ng-click="confirm();">
            <i class="material-icons">done</i>
        </button>
    </div>
</div>
